<template>
  <div id="home">
    <nav-bar class="nav-bar">
      <template slot="center">购物街</template>
    </nav-bar>
    <tab-control
      class="tab-control"
      :titles="titles"
      @tabIndex="tabclick"
      ref="tabControl1"
      v-show="isTabFixed"
    ></tab-control>
    <scroll
      class="scroll"
      ref="scroll"
      :probe-type="3"
      @scroll="contentScroll"
      :pull-up-load="true"
      @pullingUp="loadMore"
    >
      <home-swiper :banners="banner" @swiperImg="swiperImgLoad" />
      <home-recommend :recommends="recommend"></home-recommend>
      <home-hot></home-hot>
      <tab-control
        :titles="titles"
        @tabIndex="tabclick"
        ref="tabControl"
      ></tab-control>
      <goods-list :goods="goodsLists"></goods-list>
    </scroll>
    <back-top @click.native="backTopClick" v-show="isShowBackTop"></back-top>
  </div>
</template>
<script>
import NavBar from "components/common/navBar/NavBar";
import Scroll from "components/common/scroll/Scroll";
import TabControl from "components/context/tabControl/TabControl";
import GoodsList from "components/context/goods/GoodsList";

import HomeSwiper from "./homeComps/HomeSwiper";
import HomeRecommend from "./homeComps/HomeRecommend";
import HomeHot from "./homeComps/HomeHot";

import { imgLoadRefresh, backTopcom } from "common/mixin";
import { getHomeList, getGoodsLists } from "network/home";
export default {
  name: "home",
  mixins: [imgLoadRefresh, backTopcom],
  data() {
    return {
      banner: [],
      recommend: [],
      titles: ["流行", "新款", "精选"],
      goods: {
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] },
      },
      currentType: "pop",
      tabOffSetTop: 0,
      isTabFixed: false,
    };
  },
  components: {
    NavBar,
    Scroll,
    TabControl,
    GoodsList,
    HomeSwiper,
    HomeRecommend,
    HomeHot,
  },
  created() {
    this.getHomeLists();
    this.getHomeGoodslist("pop");
    this.getHomeGoodslist("new");
    this.getHomeGoodslist("sell");
  },
  methods: {
    //   轮播图片加载完成
    swiperImgLoad() {
      this.tabOffSetTop = this.$refs.tabControl.$el.offsetTop;
    },
    //   上拉加载更多
    loadMore() {
      this.getHomeGoodslist(this.currentType);
    },
    contentScroll(position) {
      // 1.回到顶部的监听
      this.isShowBackTop = -position.y > 1000;
      //   tabControl是否吸顶
      this.isTabFixed = -position.y > this.tabOffSetTop;
    },
    tabclick(index) {
      switch (index) {
        case 0:
          this.currentType = "pop";
          break;
        case 1:
          this.currentType = "new";
          break;
        case 2:
          this.currentType = "sell";
          break;
      }
      this.$refs.tabControl1.currentClass = index;
      this.$refs.tabControl.currentClass = index;
    },
    getHomeLists() {
      getHomeList().then((res) => {
        this.banner = res.data.banner.list;
        this.recommend = res.data.recommend.list;
      });
    },
    // 获取商品数据
    getHomeGoodslist(type) {
      const page = this.goods[type].page + 1;
      getGoodsLists(type, page).then((res) => {
        this.goods[type].list.push(...res.data.list);
        this.goods[type].page += 1;
        // 完成上拉加载更多
        this.$refs.scroll.finishPullUp();
      });
    },
  },
  computed: {
    goodsLists() {
      return this.goods[this.currentType].list;
    },
  },
  deactivated() {
    this.$bus.$off("imgItemLoad", this.imgRefresh);
  },
};
</script>
<style scoped>
#home {
  /* padding-top: 44px; */
  position: relative;
  height: 100vh;
}
.nav-bar {
  background-color: var(--color-tint);
  color: #fff;

  /*原生内的滚动，增加better-scroll之后不需要了
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5; */
}
/*在better-scroll内不起作用
.tab-control {
  position: sticky;
  top: 44px;
  z-index: 10;
  padding-bottom: 10px;
} */
.scroll {
  overflow: hidden;
  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
}
.tab-control {
  position: relative;
  z-index: 9;
}
</style>
